<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img_ {
            position: relative;
            height: 398px;
            border: 1px solid #ccc;
            position: fixed;
            left: 10%;
            top: 10%;
        }

        .mask {
            display: none;
            position: absolute;
            width: 300px;
            height: 300px;
            top: 0;
            left: 0;
            background-color: #FEDE4F;
            opacity: 0.5;
            border: 1px solid #ccc;
            cursor: move;
        }
        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999; /* 提高层级 */
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="img_">
        <img src="./imgs/一人之下.webp" alt="">
        <!-- 遮挡层 -->
        <div class="mask"></div>
        <div class="big">
            <img src="./imgs/你的名字.jpg" alt="">
        </div>
    </div>

    <script>
            var img = document.querySelector('img_');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            // 1.鼠标经过 img_ 就显示和隐藏 mask 遮挡层 和 big 大盒子
            img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
                big.style.display = 'block';
            })
            img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            img.addEventListener('mousemove', function(e) {
                // 1.先计算出鼠标在盒子内是的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                // (2) 减去盒子的一半
                var maskX = mask.offsetwidth / 2;
                var maskY = mask.offsetHeight / 2;

                if(maskX <= 0) {
                    maskX = 0;
                } else if(maskX >= img.offsetwidth - mask.offsetwidth) {
                    maskX = img.offsetwidth - mask.offsetwidth;
                }
                if(maskY <= 0) {
                    maskY = 0;
                } else if(maskY >= img.offsetHeight - mask.offsetHeight) {
                    maskY = img.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = x - maskX + 'px';
                mask.style.top = y - maskY + 'px';
            })

    </script>
</body>
</html>